$(document).ready(function(){
  //set up the slide show
  //show first timeline year
  $('div.timeline-year').first().show();
  //make #content-slider slide function
  $("#content-slider").slider({
    animate: true,
    change: handleSliderChange,
    // slide: handleSliderSlide
    //make handleSlider log by year
    min: 2002,
    max: 2014,
    step: 1
  });
});

//set up handleSlider
function handleSliderChange(e, ui)
{
  //hide timeline-year
  $('div.timeline-year').hide();
  $('div#timeline-navigation li').removeClass('year-active');
  var div_selector = 'div#year-' + ui.value;
  // alert(div_selector);
  $(div_selector).show();
  //make li#slider-year activate when the users slide the slide handle
  var bottom_number_selector = 'li#slider-year-' + ui.value;
  $(bottom_number_selector).addClass('year-active');
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
